<template>
  <ResultList
    title="已选品类"
    labelKey="categoryName"
    :codeKey="codeKey"
    :tagList="selectCategories"
    @remove="handleRemoveCategory"
  />
</template>
<script>
import ResultList from './ResultList';
import { eventBus } from '../eventBus';
import { getArraysByMaps } from '@/utils/getUtils';
export default {
  components: { ResultList },
  props: {
    results: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      codeKey: 'categoryNo',
      selectCategories: []
    }
  },
  created () {
    eventBus.$on('selectCategory', categoriesMaps => {
      this.selectCategories = getArraysByMaps(categoriesMaps)
      this.$emit('update:results', this.selectCategories)
    })
  },
  watch: {
    results (list) {
      this.selectBrands = list
    }
  },
  methods: {
    handleRemoveCategory (cateInfo) {
      const filterInfos = this.selectCategories.filter(item => item[this.codeKey] != cateInfo[this.codeKey])
      this.selectCategories = filterInfos
      const codeList = filterInfos.map(item => item[this.codeKey])
      eventBus.$emit('updateSelectCategiries', codeList)
    },
    clearResults () {
      this.selectCategories = []
      eventBus.$emit('updateSelectCategiries', [])
    }
  }
}
</script>
